<!--
 * @Author: your name
 * @Date: 2020-09-18 09:31:02
 * @LastEditTime: 2020-11-20 09:24:31
 * @LastEditors: Please set LastEditors
 * @Description: In User Settings Edit
 * @FilePath: \supplyweb\src\views\Home.vue
-->
<template>
  <div class="page_home">
    <div>
      <!-- 搜索banner -->
      <div class="banner_box">
        <div class="serach_box">
          <div class="search_containt">
            <div class="search_nav_bar" id="search_nav_bar">
              <div class="flex tc">
                <p
                  @click="Switch_search_nav(1)"
                  :class="SearchNavIndex == 1 ? 'item_search_nav_active' : ''"
                  class="item_search_nav pl-15 flex-1"
                >
                  查产品
                </p>
                <p
                  @click="Switch_search_nav(2)"
                  :class="SearchNavIndex == 2 ? 'item_search_nav_active' : ''"
                  class="item_search_nav flex-1"
                >
                  查需求
                </p>
                <p
                  @click="Switch_search_nav(3)"
                  :class="SearchNavIndex == 3 ? 'item_search_nav_active' : ''"
                  class="item_search_nav pr-15 flex-1"
                >
                  查企业
                </p>
              </div>
            </div>
            <div class="flex">
              <div class="search_input flex-1">
                <a-input
                  v-model="SearchBannerKeywords"
                  placeholder="请输入关键字"
                />
              </div>
              <div class="search_btn" @click="SearchCatory">
                <i class="iconfont icon-sousuo"></i>
              </div>
            </div>
          </div>
        </div>
      </div>
      <!-- 搜索banner -->

      <!-- 数据预览 -->
      <div class="preview_main">
        <div class="wh-1200 sufix_box">
          <div class="flex">
            <div class="flex-1 boder-r item_add_contanint">
              <div class="flex">
                <div>
                  <img src="@/assets/images/home/pb_product.png" alt="" />
                </div>
                <div
                  class="flex-1 ml-32 mt-16"
                  @click="JumpUserCenter('/usercenter/ProductsRelease')"
                >
                  <div class="add_containt">
                    <span class="mr-16 title">发布产品</span
                    ><i class="iconfont icon-gengduojiantou"></i>
                  </div>
                  <p class="tips_title mt-10">
                    发布您的优质产品，获得更多的曝光率和关注度
                  </p>
                </div>
              </div>
            </div>
            <div class="flex-1 item_add_contanint">
              <div class="flex">
                <div>
                  <img src="@/assets/images/home/pb_demand.png" alt="" />
                </div>
                <div
                  class="flex-1 ml-32 mt-16"
                  @click="JumpUserCenter('/usercenter/RequirementRelease')"
                >
                  <div class="add_containt">
                    <span class="mr-16 title">发布需求</span
                    ><i class="iconfont icon-gengduojiantou"></i>
                  </div>
                  <p class="tips_title mt-10">
                    发布您的产品需求，达成供需对接交易
                  </p>
                </div>
              </div>
            </div>
          </div>
        </div>
        <div class="wh-1200 tc preview_containt">
          <p class="title">产品供需数据概览</p>
          <p class="time">更新时间：{{ TJUppdataTime }}</p>

          <div class="menu_data clearfix">
            <div class="item_menu_data f-left">
              <div class="flex">
                <i class="iconfont radius_icon bg_gx icon-xuqiu"></i>
                <div class="flex-1 tl ml-10">
                  <p class="info_title">需求数</p>
                  <!-- <p class="num">5384</p> -->
                  <countTo
                    class="num"
                    :startVal="startVal"
                    :endVal="TjData.demandCount"
                    :duration="3000"
                  ></countTo>
                </div>
              </div>
            </div>

            <div class="item_menu_data f-left">
              <div class="flex">
                <i class="iconfont radius_icon bg_cp icon-gongxu"></i>
                <div class="flex-1 tl ml-10">
                  <p class="info_title">产品数</p>
                  <countTo
                    class="num"
                    :startVal="startVal"
                    :endVal="TjData.productInfoCount"
                    :duration="3000"
                  ></countTo>
                </div>
              </div>
            </div>

            <div class="item_menu_data f-left">
              <div class="flex">
                <i class="iconfont radius_icon bg_dj icon-duijie"></i>
                <div class="flex-1 tl ml-10">
                  <p class="info_title">对接数</p>
                  <countTo
                    class="num"
                    :startVal="startVal"
                    :endVal="TjData.userMessageCount"
                    :duration="3000"
                  ></countTo>
                </div>
              </div>
            </div>

            <div class="item_menu_data f-left">
              <div class="flex">
                <i class="iconfont radius_icon bg_ent icon-qiye"></i>
                <div class="flex-1 tl ml-10">
                  <p class="info_title">企业数</p>
                  <countTo
                    class="num"
                    :startVal="startVal"
                    :endVal="TjData.entBaseInfoCount"
                    :duration="3000"
                  ></countTo>
                </div>
              </div>
            </div>

            <div class="item_menu_data f-left">
              <div class="flex">
                <i class="iconfont radius_icon bg_total icon-tongji"></i>
                <div class="flex-1 tl ml-10">
                  <p class="info_title">供需总计</p>
                  <countTo
                    class="num"
                    :startVal="startVal"
                    :endVal="TjData.demandCount + TjData.productInfoCount"
                    :duration="3000"
                  ></countTo>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
      <!-- 数据预览 -->
      <!-- 左侧导航 锚点 -->

      <div class="Anchor_menu" v-if="PageTop > 400">
        <div class="menu_list">
          <div
            @click="JumpScroptop('news_main')"
            class="item_menu"
            :class="
              PageTop > 600 && PageTop < 1010
                ? 'active_menu active_menu_zhence'
                : 'active_menu_1'
            "
          >
            <i class="iconfont icon-zhengce"></i>
          </div>
          <div
            @click="JumpScroptop('product_supply')"
            class="item_menu"
            :class="
              PageTop > 1010 && PageTop < 2010
                ? 'active_menu active_menu_chanping'
                : 'active_menu_1'
            "
          >
            <i class="iconfont icon-chanpin"></i>
          </div>
          <div
            @click="JumpScroptop('material_demand')"
            class="item_menu"
            :class="
              PageTop > 2010 && PageTop < 2650
                ? 'active_menu active_menu_xuqiu'
                : 'active_menu_1'
            "
          >
            <i class="iconfont icon-xuqiu"></i>
          </div>
          <div
            @click="JumpScroptop('hot_sort')"
            class="item_menu"
            :class="
              PageTop > 2650 ? 'active_menu active_menu_remen' : 'active_menu_1'
            "
          >
            <i class="iconfont icon-remen"></i>
          </div>
          <!-- active_menu -->
        </div>
      </div>
      <!-- 左侧导航 锚点 -->
      <!-- 政策规范start -->
      <div class="news_main" id="news_main">
        <div class="wh-1200 auto clearfix news_containt flex">
          <div class>
            <div class="l_mian">
              <p class="title">政策规范</p>
              <p class="tips_title">掌握最新优惠政策</p>
              <img class="chua" src="@/assets/images/home/policy.png" alt />
            </div>
          </div>
          <div class="flex-1 r_main tc">
            <p
              class="ent_title row-ellipsis"
              v-if="NoticePageList.length > 0"
              @click="JumpNoticeDeatails(NoticePageList[0].id)"
            >
              {{ NoticePageList[0].title }}
            </p>
            <p
              class="ent_details tl"
              v-if="NoticePageList.length > 0"
              v-html="NoticePageList[0].content"
            ></p>

            <div class="news_list clearfix">
              <div
                class="item_news_list tl"
                @click="JumpNoticeDeatails(item.id)"
                v-for="(item, index) in NoticePageList.slice(1, 7)"
                :key="index"
              >
                <p class="row-ellipsis">
                  {{ item.title }}
                </p>
              </div>
            </div>
          </div>
        </div>
      </div>
      <!-- 政策规范end -->
      <!-- 产品供应 start-->
      <div class="product_supply" id="product_supply">
        <div class="wh-1200 auto product_supply_main clearfix">
          <div class="exchange tr mb-16">
            <div @click="getRandomOnlineRecommendationList" class="huan-cls">
              <i class="iconfont icon-huanyihuan"></i>
              <span class="ml-10">换一换</span>
            </div>
          </div>
          <div class="clearfix">
            <div class="product_nav">
              <div class="product_containt">
                <p class="title">产品供应</p>
                <p class="tags_title">智能推荐优质产品，解决需求快人一步</p>
                <div class="nav_btn_containt clearfix">
                  <div
                    class="item_nav_btn"
                    v-for="(item, index) in HotProductCategoryList"
                    :key="index"
                  >
                    <router-link
                      :to="{
                        path: '/ProductProvide',
                        query: {
                          category_1: item.categoryNo,
                          category_1_id: item.id,
                        },
                      }"
                    >
                      <p class="row-ellipsis">{{ item.categoryName }}</p>
                    </router-link>
                  </div>
                </div>
                <router-link to="/ProductProvide">
                  <a-button class="more_btn mt-10">更多>></a-button>
                </router-link>
                <img class="chua" src="@/assets/images/home/gy.png" alt />
              </div>
            </div>
            <div class="demand_list clearfix">
              <div
                class="item_demand_list"
                v-for="(item, index) in ProductList"
                :key="index"
                @click="JumpProductDetails(item.id)"
              >
                <div class="tags" v-if="item.isHot == 1">热门</div>
                <div class="product_img_box">
                  <img
                    src="@/assets/images/defult_img.png"
                    v-real-img="
                      item.productFile.length > 0 && item.productFile[0].fileUrl
                        ? item.productFile[0].fileUrl
                        : '@/assets/images/defult_img.png'
                    "
                    alt
                  />
                  <!-- <img v-if="item.productFile.length > 0" :src="wengeGetImageUrl(item.productFile[0].fileUrl)" alt="" />
                  <img v-else class="product_img" src="@/assets/images/defult_img.png" alt /> -->
                </div>
                <p class="title row-ellipsis mt-10">
                  {{ item.productName ? item.productName : "无" }}
                </p>
                <p class="price" v-if="item.isInterview != 1">
                  ¥{{ item.price }}
                </p>
                <p class="price" v-if="item.isInterview == 1">面议</p>
                <p
                  class="category row-ellipsis"
                  :title="
                    item.productOneCategoryName +
                    '-' +
                    item.productSecondCategoryName
                  "
                >
                  <!-- {{
                    item.productOneCategoryName
                      ? item.productOneCategoryName
                      : "无"
                  }} -->
                  {{
                    item.productOneCategoryName
                      ? item.productOneCategoryName
                      : "无"
                  }}
                  {{ item.productSecondCategoryName }}
                </p>
                <div class="category_tags_box">
                  <p v-if="item.productTagName" class="category_tags">
                    {{ item.productTagName }}
                  </p>
                </div>
                <div class="company flex">
                  <p class="company_name flex-1 row-ellipsis">
                    {{ item.entName ? item.entName : "无" }}
                  </p>
                  <i class="iconfont icon-gengduojiantou f-right"></i>
                </div>
              </div>
            </div>
          </div>

          <div class="product_banner mt-32">
            <img src="@/assets/images/home/ad.png" alt="" />
          </div>
        </div>
      </div>
      <!-- 产品供应 ebd-->

      <!-- 产品需求start -->
      <div class="material_demand" id="material_demand">
        <div class="wh-1200 auto material_demand_main">
          <div class="exchange tr">
            <div class="mb-16">
              <i
                class="iconfont icon-huanyihuan"
                @click="getWZRandomOnlineRecommendationList"
                ><span class="ml-10">换一换</span></i
              >
            </div>
            <div class="clearfix">
              <div class="material_nav">
                <div class="material_containt">
                  <p class="title">产品需求</p>
                  <p class="tags_title">实时展示企业需求，加速促成产品交易</p>
                  <div class="nav_btn_containt clearfix">
                    <div
                      class="item_nav_btn"
                      v-for="(item, index) in HotxqProductCategoryList"
                      :key="index"
                    >
                      <router-link
                        :to="{
                          path: '/MaterialDemand',
                          query: {
                            category_1: item.categoryNo,
                            category_1_id: item.id,
                          },
                        }"
                      >
                        <p class="row-ellipsis">{{ item.categoryName }}</p>
                      </router-link>
                    </div>
                    <!-- <div class="item_nav_btn">
                    <p>医疗设备</p>
                  </div>
                  <div class="item_nav_btn">
                    <p>药制品</p>
                  </div>
                  <div class="item_nav_btn">
                    <p>通讯设备</p>
                  </div>
                  <div class="item_nav_btn">
                    <p>电气照明</p>
                  </div>
                  <div class="item_nav_btn">
                    <p>电气布线</p>
                  </div>
                  <div class="item_nav_btn">
                    <p>办公机械</p>
                  </div> -->
                  </div>
                  <router-link to="/MaterialDemand">
                    <a-button class="more_btn mt-10">更多>></a-button>
                  </router-link>
                  <img class="chua" src="@/assets/images/home/demand.png" alt />
                </div>
              </div>
              <div class="demand_list tl clearfix">
                <div
                  @click="JumpMaterialDemand(item.id)"
                  :class="
                    index < 3
                      ? 'item_demand_list item_demand_list_tags'
                      : 'item_demand_list item_demand_list_tags'
                  "
                  v-for="(item, index) in RecommendationPageList"
                  :key="index"
                >
                  <div
                    class="tags"
                    v-if="item.remainDays < 4 && item.remainDays >= 0"
                  >
                    即将到期
                  </div>
                  <div
                    class="tags"
                    style="background-color: #0da9b0"
                    v-if="item.isLongTime == 1"
                  >
                    长期有效
                  </div>
                  <p class="title row-ellipsis">{{ item.demandProductName }}</p>
                  <p class="line"></p>
                  <div class="item_details">
                    <p
                      class="row-ellipsis"
                      :title="
                        item.productOneCategoryName +
                        '-' +
                        item.productSecondCategoryName
                      "
                    >
                      产品类别：{{ item.productOneCategoryName }}
                      {{ item.productSecondCategoryName }}
                    </p>
                    <p>发布时间：{{ item.createTime }}</p>
                    <p>
                      剩余时间：
                      <span v-if="item.remainDays > 0 && item.isLongTime != 1"
                        >{{ item.remainDays }}天</span
                      >
                      <span v-else-if="item.remainDays == 0">今天</span>
                      <span
                        v-else-if="item.remainDays < 0 && item.isLongTime != 1"
                        >已失效</span
                      >
                      <span v-if="item.isLongTime == 1" style="color: #0da9b0"
                        >长期有效</span
                      >
                    </p>
                    <p>需求型号：{{ item.demandNo }}</p>
                  </div>
                  <p class="line"></p>
                  <div class="company flex">
                    <p class="company_name flex-1 row-ellipsis">
                      {{ item.entName ? item.entName : "无" }}
                    </p>
                    <i class="iconfont icon-gengduojiantou f-right"></i>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>
        <!-- 产品需求end-->

        <!-- 热门分类start -->
        <div class="hot_sort" id="hot_sort">
          <div class="wh-1200 auto tc">
            <div class="hot_title">热门分类</div>
            <div class="sort_list clearfix">
              <div
                class="item_sort_list"
                v-for="(item, index) in TreeList"
                :key="index"
              >
                <div class="flex top_box">
                  <p class="tag_title flex-1">{{ item.categoryName }}</p>
                  <i
                    class="iconfont icon-gengduojiantou gengduojiantou"
                    @click="JumpProductProvideA(item.categoryNo, item.id)"
                  ></i>
                </div>
                <div class="child_box clearfix">
                  <div
                    @click="
                      JumpProductProvideB(
                        item.categoryNo,
                        item.id,
                        ele.categoryNo,
                        ele.id
                      )
                    "
                    v-for="(ele, indexchild) in item.children"
                    :key="indexchild"
                  >
                    <p
                      class="row-ellipsis"
                      v-if="indexchild < 6 && ele.categoryStatus === 1"
                      :class="index == 5 ? 'child_title' : 'child_title'"
                    >
                      {{ ele.categoryName }}
                    </p>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>
        <!-- 热门分类end -->

        <!-- 立即入驻 start-->
        <div class="settlement tc">
          <div class="tips_title">
            <span class="mr-60">
              已有
              <em>
                <countTo
                  :startVal="startVal"
                  :endVal="TjData.entBaseInfoCount"
                  :duration="3000"
                ></countTo>
              </em>
              家企业入驻
            </span>
            <span class>
              发布
              <em>
                <countTo
                  :startVal="startVal"
                  :endVal="TjData.productInfoCount"
                  :duration="3000"
                ></countTo>
              </em>
              个产品
            </span>
          </div>
          <div>
            <a
              class="setment_btn"
              href="javascript:void(0);"
              @click="GetGolborredirectUrl"
              >立即入驻</a
            >
          </div>
        </div>
        <!-- 立即入驻 end-->
      </div>

      <!-- 感兴趣的行业弹框 -->
      <a-modal
        :centered="true"
        title="请选择您感兴趣的产品分类"
        cancelText="下次再说"
        okText="提交"
        :width="903"
        :closable="false"
        :visible="modelvisible"
        @ok="submit"
        wrapClassName="industrymode"
        @cancel="handleCancel"
      >
        <div class="model_containt">
          <div class="person"></div>
          <div class="top_title">请选择您感兴趣的产品分类</div>
          <p class="tips_title">我们将为您智能推送相关信息</p>
          <div class="industrymode_list">
            <template v-for="(item, index) in industryList">
              <span :key="index" class="" v-if="index < 12">
                <p
                  class="item_industrymode row-ellipsis"
                  :title="item.categoryName"
                  :class="item.active ? 'item_industrymode_active' : ''"
                  @click="AddindustryList(index)"
                >
                  {{ item.categoryName ? item.categoryName : "无" }}
                </p>
              </span>
            </template>
            <!-- <span v-for="(item,index) in industryList" :key="index" class="" v-if="index<12">
              <p class="item_industrymode row-ellipsis" :title="item.categoryName" :class="item.active ?'item_industrymode_active':''" @click="AddindustryList(index)">
                {{item.categoryName ?item.categoryName:'无'}}
              </p>
            </span> -->
            <div v-if="industryListShow">
              <template v-for="(item, index) in industryList">
                <span :key="index" class="" v-if="index > 12">
                  <p
                    class="item_industrymode row-ellipsis"
                    :title="item.categoryName"
                    :class="item.active ? 'item_industrymode_active' : ''"
                    @click="AddindustryList(index)"
                  >
                    {{ item.categoryName ? item.categoryName : "无" }}
                  </p>
                </span>
              </template>
              <!-- <span v-for="(item,index) in industryList" :key="index" class="" v-if="index>12">
                <p class="item_industrymode row-ellipsis" :title="item.categoryName" :class="item.active ?'item_industrymode_active':''" @click="AddindustryList(index)">
                  {{item.categoryName ?item.categoryName:'无'}}
                </p>
              </span> -->
            </div>
          </div>
        </div>
        <div class="tr">
          <p v-if="industryListShow == false" @click="industryListShow = true">
            <a-button type="primary"> 展开 </a-button>
          </p>
          <p v-if="industryListShow == true" @click="industryListShow = false">
            <a-button type="primary"> 收起 </a-button>
          </p>
          <div class="more mt-10 tl">
            已选择<span class="num">{{ industryActivelen }}</span> 项
          </div>
        </div>
      </a-modal>
    </div>
  </div>
</template>

<script>
// @ is an alias to /src
// import { Icon } from "ant-design-vue";
import {
  getToken,
  setIsSign,
  setShowProductDialog,
  // getShowProductDialog,
} from "@/utils/auth"; // get token from cookie

import {
  homeTjData,
  // getOnlineRecommendationData,
  // getHotProductCategory,
  getByParent,
  getRandomOnlineRecommendationList,
  getWZRandomOnlineRecommendationList,
  getHotProductCategoryTree,
} from "@/apis/Home";
import { addVisit } from "@/apis/system/index";
import { getPageList, getPushStatus } from "@/apis/SysPolicy";
import { GetUserInfo } from "@/apis/user";
import { getStatistics } from "@/apis/com/company";
import {
  // AdduserAttentionCategory,
  AttentionCategorygetPageList,
} from "@/apis/user/userAttentionCategory";
import countTo from "vue-count-to";
// const IconFont = Icon.createFromIconfontCN({
//   scriptUrl: "//at.alicdn.com/t/font_2056587_p20u0u8ro2d.js",
// });
export default {
  name: "Home",
  components: { countTo }, // IconFont
  data() {
    return {
      // EntInfo: {},
      NoticePageList: [], //政策规范
      TJUppdataTime: "",
      industryListShow: false,
      TreeList: [],
      SearchBannerKeywords: "",
      productTag: ["可定制", "OEM"],
      TjData: {
        demandCount: 0,
        entBaseInfoCount: 0,
        productInfoCount: 0,
        userMessageCount: 0,
      }, //统计

      ProductList: [], //产品供应列表
      HotProductCategoryList: [], //产品热门分类
      HotxqProductCategoryList: [], //需求热门分类
      RecommendationPageList: [], //物资推荐列表
      bodyBgImage1:
        "url(" + require("../assets/images/home/searchtabbg01.png") + ")",
      bodyBgImage2:
        "url(" + require("../assets/images/home/searchtabbg02.png") + ")",
      bodyBgImage3:
        "url(" + require("../assets/images/home/searchtabbg03.png") + ")",
      startVal: 0,
      endVal: 3000,
      modelvisible: false, //兴趣行业弹窗
      SearchNavIndex: 1,
      industryActivelen: 0,
      // 感兴趣行业
      industryList: [
        {
          categoryName: "电子",
          active: false,
        },
        {
          categoryName: "纺织",
          active: false,
        },
        {
          categoryName: "化工",
          active: false,
        },
        {
          categoryName: "建材",
          active: false,
        },
        {
          categoryName: "机械",
          active: false,
        },
        {
          categoryName: "轻工",
          active: false,
        },
        {
          categoryName: "食品",
          active: false,
        },
        {
          categoryName: "冶 金",
          active: false,
        },
        {
          categoryName: "制药",
          active: false,
        },
        {
          categoryName: "通用服务",
          active: false,
        },
        {
          categoryName: "通用服务",
          active: false,
        },
      ],
      SortData: [
        {
          title: "医疗保健产品",
          child: [
            "健康治疗/辅助产品",
            "计划生育产品",
            "健康增强产品",
            "家用诊断设备",
            "各种医疗保健产品包",
            " 医疗设备/药制品",
          ],
        },
        {
          title: "美容/个人护理/卫生产品",
          child: [
            "皮肤产品",
            "头发产品",
            "化妆品/香水 ",
            " 个人卫生产品",
            "身体护理产品",
            "  美容/个人护理/卫生产品包",
          ],
        },
        {
          title: "婴儿护理用品",
          child: ["婴儿喂养/卫生用品", "婴儿福利用品", "婴儿护理套装  "],
        },
        {
          title: "通讯设备",
          child: ["通讯设备 "],
        },
        {
          title: "电气产品",
          child: [
            "电气连接/配电",
            "电气照明",
            "电气布线",
            "电子通讯组件",
            "通用电气硬件",
          ],
        },
        {
          title: "文具/办公机械/特定场合用品",
          child: [
            "贺卡/礼品包装/特定场合用品   ",
            "文具/办公机械",
            "各种文具/办公机械/特殊场合用品包",
          ],
        },
      ],
      PageTop: 0,
      randomRecomm: {
        status: "1",
      },
    };
  },
  created() {
    this.getUserToken();
    this.showPageTop();
    this.GethomeTjData();
    this.getHotProductCategory();
    this.getByParent();
    this.getHotProductCategoryTree();
    this.getNoticePageList();
    this.getHotXQProductCategory();
    this.addVisitNum();
    this.getPushStatus()
      .then((res) => {
        this.getWZRandomOnlineRecommendationList();
        this.getRandomOnlineRecommendationList();
      })
      .catch((err) => {});
    // this.getWZRandomOnlineRecommendationList()
    // this.getRandomOnlineRecommendationList()
    // let _localhostValue = localStorage.getItem("ProductIndustryCategory");
    // let _ShowProductDialog = getShowProductDialog();
    // if (_ShowProductDialog == "false") {
    //   this.modelvisible = false;
    // } else {
    //   this.modelvisible = true;
    // }
    setTimeout(() => {
      if (getToken()) {
        setTimeout(() => {
          // this.getEntBaseInfo();
          this.AttentionCategorygetPageList();
        }, 500);
      }
    }, 200);
  },
  mounted() {
    window.addEventListener("scroll", this.showPageTop, true);
  },
  beforeDestroy() {
    window.removeEventListener("scroll", this.showPageTop);
  },
  methods: {
    /** 获取用户信息 */
    getUserToken() {
      let url = window.location.search;
      const reg = new RegExp("(^|&)" + "code" + "=([^&]*)(&|$)");
      const result = url.substring(1).match(reg);
      let code = result ? decodeURIComponent(result[2]) : null;
      console.log(code, "code值");
      if (code) {
        this.$store.dispatch("getAccessToken", code);
      }
    },
    // 获取开关状态
    getPushStatus() {
      return new Promise((resolve, reject) => {
        getPushStatus()
          .then((res) => {
            let _localhostValue = localStorage.getItem(
              "ProductIndustryCategory"
            );
            if (res.code && res.code === 200) {
              const { paramValue } = res.data;
              this.randomRecomm.status = paramValue;
              if (paramValue == 1 && getToken() && !_localhostValue) {
                // 显示弹框
                this.modelvisible = true;
              } else {
                if (paramValue == 0 && _localhostValue) {
                  localStorage.removeItem("ProductIndustryCategory");
                }
                for (let i = 1; i <= 3; i++) {
                  this.$set(
                    this.randomRecomm,
                    `n${i}`,
                    Math.floor(Math.random() * 10)
                  );
                }
              }
              resolve(res.data);
            } else {
              this.$message.error("获取状态失败");
              reject();
            }
          })
          .catch((err) => {
            if (err) {
              this.$message.error("服务器错误");
            }
            reject();
          });
      });
    },
    GetGolborredirectUrl() {
      const FULL_CHARTER =
        "ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopgrstuvwxyz";
      let state = "";
      for (let i = 0; i < 6; i++) {
        state += FULL_CHARTER[Math.floor(Math.random() * 52)];
      }

      let GolborredirectUrl =
        GolbUrl.uaaUri +
        "/oauth/authorize?client_id=" +
        GolbUrl._clientId_ +
        "&redirect_uri=" +
        GolbUrl.redirect_uri +
        "&response_type=code&state=" +
        state;
      console.log(GolborredirectUrl);
      window.location.href = GolborredirectUrl;
    },
    // 获取我的关注
    AttentionCategorygetPageList() {
      let _params = {
        current: 1,
        size: 100,
      };
      AttentionCategorygetPageList(_params)
        .then((res) => {
          // console.log("获取我关注的");
          // console.log(res);
          if (res.code == 200) {
            if (res.data.records.length > 0) {
              this.modelvisible = false;
              localStorage.setItem(
                "ProductIndustryCategory",
                JSON.stringify(res.data.records)
              );
            }
          }
        })
        .catch((error) => {});
    },
    // getEntBaseInfo() {
    //   getEntBaseInfo()
    //     .then((res) => {
    //       if (res.code == 200) {
    //         this.EntInfo = res.data;
    //       }
    //     })
    //     .catch((error) => {});
    // },
    JumpNoticeDeatails(id) {
      this.$router.push({ path: "/PolicyDetails", query: { id: id } });
    },
    // 获取政策规范
    getNoticePageList() {
      let _params = {
        current: 1,
        size: 7,
        isOrderDesc: true,
        keyword: "",
      };
      getPageList(_params)
        .then((res) => {
          console.log("政策规范");
          console.log(res);
          this.NoticePageList = res.data.records;
        })
        .catch((error) => {});
    },
    // 获取用户信息
    GetUserInfo() {
      GetUserInfo()
        .then((res) => {
          if (res.data) {
            localStorage.setItem("LH_PC_BaseInfo", JSON.stringify(res.data));
          }
        })
        .catch((error) => {});
    },

    JumpScroptop(id) {
      document.getElementById(id).scrollIntoView();
      // this.PageTop = val + 1;
    },
    // 显示回到顶部按钮
    showPageTop() {
      let that = this;
      let scrollTop =
        window.pageYOffset ||
        document.documentElement.scrollTop ||
        document.body.scrollTop;
      that.PageTop = scrollTop;
    },
    //跳转用户中心去发布产品和需求
    JumpUserCenter(Url) {
      // let _IsSing = this.EntInfo.isSign;
      if (getToken()) {
        if (localStorage.getItem("IsSign") == 1) {
          this.$router.push(Url);
        } else {
          this.$store.commit("setIsSign", true);
          setIsSign(true);
          // this.$message.warning("您需要完成信用承诺函签署再进行该操作。");
        }
      } else {
        this.$router.push(Url);
      }
    },
    // 跳转产品列表

    JumpProductProvideA(A, B) {
      this.$router.push({
        path: "/ProductProvide",
        query: { category_1: A, category_1_id: B },
      });
    },

    JumpProductProvideB(A, B, C, D) {
      this.$router.push({
        path: "/ProductProvide",
        query: {
          category_1: A,
          category_1_id: B,
          category_2: C,
          category_2_id: D,
        },
      });
    },
    //获取树形分类

    getHotProductCategoryTree() {
      let _params = {
        hotType: 3,
      };
      getHotProductCategoryTree(_params)
        .then((res) => {
          console.log("树形分类");
          console.log(res);
          if (res.code == 200) {
            this.TreeList = res.data.filter((ele) => ele.categoryStatus === 1);
          }
        })
        .catch((error) => {});
    },
    // 获取产品分类
    getByParent() {
      getByParent()
        .then((res) => {
          console.log("产品分类");
          console.log(res);
          let _arr = [];
          res.data.forEach((element) => {
            if (element.categoryName != null || element.categoryName != "") {
              this.$set(element, "active", false);
              _arr.push(element);
            }
          });
          this.industryList = _arr;
        })
        .catch((error) => {});
    },
    SearchCatory() {
      if (this.SearchNavIndex == 1) {
        this.$router.push({
          path: "/ProductProvide",
          query: { keywords: this.SearchBannerKeywords },
        });
      }
      if (this.SearchNavIndex == 2) {
        this.$router.push({
          path: "/MaterialDemand",
          query: { keywords: this.SearchBannerKeywords },
        });
      }
      if (this.SearchNavIndex == 3) {
        this.$router.push({
          path: "/entIndex",
          query: { keywords: this.SearchBannerKeywords },
        });
      }
    },
    // 跳转物资详情
    JumpMaterialDemand(id) {
      this.$router.push({ path: "/MaterialDetails", query: { id } });
    },
    //获取物资推荐
    getWZRandomOnlineRecommendationList() {
      let _params = {};
      if (this.randomRecomm.status === "0") {
        // 开关关闭
        _params = {
          n1: this.randomRecomm.n1,
          n2: this.randomRecomm.n2,
          n3: this.randomRecomm.n3,
          ntotal: 6,
          attCategory1List: [],
          attCategory2List: [],
          showNotExpired: 1,
          auditStatus: 2,
          demandStatus: 2,
          searchCategory1List: [],
          searchCategory2List: [],
          searchKeyWords: [],
        };
      } else {
        // 开关开启
        // 关键字本地
        let _LocalhostsearchdemandKeyWords = localStorage.getItem(
          "searchdemandKeyWords"
        );
        let _searchdemandKeyWords = [];
        // let _searchdemandKeyWordsJSON = [];
        if (_LocalhostsearchdemandKeyWords != null) {
          let _searchdemandKeyWordsJSON = JSON.parse(
            _LocalhostsearchdemandKeyWords
          );
          _searchdemandKeyWordsJSON.map((item) => {
            _searchdemandKeyWords.push(item);
          });
        }

        // 本地搜索的一级产品分类
        let searchCategory1List = [];
        let _LocalhostsearchCategory1List = localStorage.getItem(
          "searchdenandCategory1List"
        );
        if (_LocalhostsearchCategory1List != null) {
          searchCategory1List = JSON.parse(_LocalhostsearchCategory1List);
        } else {
          searchCategory1List = [];
        }
        // 本地二级产品分类
        let _LocalhostsearchCategory2List = localStorage.getItem(
          "searchdenandCategory2List"
        );

        let searchCategory2List = [];
        if (_LocalhostsearchCategory2List != null) {
          searchCategory2List = JSON.parse(_LocalhostsearchCategory2List);
        } else {
          searchCategory2List = [];
        }
        let _IndustryCategory = localStorage.getItem("ProductIndustryCategory");
        let _attCategory1List = [];
        if (_IndustryCategory) {
          let _IndustryCategoryjson = JSON.parse(_IndustryCategory);
          _IndustryCategoryjson.map((item) => {
            _attCategory1List.push(item.categoryNo);
          });
        }
        _params = {
          ntotal: 6,
          attCategory1List: _attCategory1List,
          attCategory2List: [],
          showNotExpired: 1,
          auditStatus: 2,
          demandStatus: 2,
          searchCategory1List: searchCategory1List,
          searchCategory2List: searchCategory2List,
          searchKeyWords: _searchdemandKeyWords,
        };
      }

      // let _params = {
      //   ntotal: 6,
      //   attCategory1List: _attCategory1List,
      //   attCategory2List: [],
      //   showNotExpired: 1,
      //   auditStatus: 2,
      //   demandStatus: 2,
      //   searchCategory1List: searchCategory1List,
      //   searchCategory2List: searchCategory2List,
      //   searchKeyWords: _searchdemandKeyWords,
      // };
      getWZRandomOnlineRecommendationList(_params)
        .then((res) => {
          console.log("物资推荐");
          console.log(res);
          this.RecommendationPageList = res.data;
        })
        .catch((error) => {});
    },
    // 获取产品热门分类
    getHotProductCategory() {
      let _params = {
        hotType: 1,
      };
      getHotProductCategoryTree(_params)
        .then((res) => {
          console.log("热门分类");
          console.log(res);
          if (res.code == 200) {
            this.HotProductCategoryList = res.data.filter(
              (ele) => ele.categoryStatus === 1
            );
          }
        })
        .catch((error) => {});
    },

    // 获取需求热门分类
    getHotXQProductCategory() {
      let _params = {
        hotType: 2,
      };
      getHotProductCategoryTree(_params)
        .then((res) => {
          console.log("热门分类");
          console.log(res);
          if (res.code == 200) {
            this.HotxqProductCategoryList = res.data.filter(
              (ele) => ele.categoryStatus === 1
            );
          }
        })
        .catch((error) => {});
    },
    // 获取首页统计
    GethomeTjData() {
      homeTjData()
        .then((res) => {
          console.log(res);
          if (res.code == 200) {
            this.TjData.demandCount = res.data.demandCount;
            this.TjData.productInfoCount = res.data.productInfoCount;
            this.TjData.userMessageCount = res.data.userMessageCount;
            this.TJUppdataTime = res.time;
          }
        })
        .catch((error) => {});

      // 获取企业数
      getStatistics()
        .then((res) => {
          if (res.code == 200) {
            this.TjData.entBaseInfoCount = res.data.companyCount;
          }
        })
        .catch((error) => {});
    },

    //获取首页推荐产品供应列表
    getRandomOnlineRecommendationList() {
      let _params = {};
      if (this.randomRecomm.status === "0") {
        // 开关关闭
        _params = {
          n1: this.randomRecomm.n1,
          n2: this.randomRecomm.n2,
          n3: this.randomRecomm.n3,
          ntotal: 6,
          productStatus: 2,
          attCategory1List: [],
          attCategory2List: [],
          searchCategory1List: [],
          searchCategory2List: [],
          searchKeyWords: [],
        };
      } else {
        // 开关开启
        let _IndustryCategory = localStorage.getItem("ProductIndustryCategory");
        let _attCategory1List = [];
        if (_IndustryCategory) {
          let _IndustryCategoryjson = JSON.parse(_IndustryCategory);
          _IndustryCategoryjson.map((item) => {
            _attCategory1List.push(item.categoryNo);
          });
        }
        let _LocalhostsearchKeyWords = localStorage.getItem(
          "ProductsearchKeyWords"
        );
        let _searchKeyWords = [];
        if (_LocalhostsearchKeyWords != null) {
          let _searchKeyWordsjson = JSON.parse(_LocalhostsearchKeyWords);
          _searchKeyWordsjson.map((item) => {
            _searchKeyWords.push(item);
          });
        }

        let searchCategory1List = [];
        let searchCategory2List = [];
        let _localsearchCategory1List = localStorage.getItem(
          "searchProductCategory1List"
        );

        let _localsearchCategory2List = localStorage.getItem(
          "searchProductCategory2List"
        );
        if (_localsearchCategory1List != null) {
          searchCategory1List = JSON.parse(_localsearchCategory1List);
        } else {
          searchCategory1List = [];
        }
        if (_localsearchCategory2List != null) {
          searchCategory2List = JSON.parse(_localsearchCategory2List);
        } else {
          searchCategory2List = [];
        }
        _params = {
          ntotal: 6,
          productStatus: 2,
          attCategory1List: _attCategory1List,
          attCategory2List: [],
          searchCategory1List: searchCategory1List,
          searchCategory2List: searchCategory2List,
          searchKeyWords: _searchKeyWords,
        };
      }
      // let _params = {
      //   ntotal: 6,
      //   productStatus: 2,
      //   attCategory1List: _attCategory1List,
      //   attCategory2List: [],
      //   searchCategory1List: searchCategory1List,
      //   searchCategory2List: searchCategory2List,
      //   searchKeyWords: _searchKeyWords,
      // };
      getRandomOnlineRecommendationList(_params)
        .then((res) => {
          console.log("产品供应");
          console.log(res);
          if (res.code == 200) {
            this.ProductList = res.data;
          }
        })
        .catch((error) => {});
    },
    // 跳转到产品供应详情
    JumpProductDetails(id) {
      this.$router.push("/ProductContent?id=" + id);
    },
    // 切换感兴趣的行业
    AddindustryList(index) {
      this.industryList[index].active = !this.industryList[index].active;
      let _arr = [];
      this.industryList.forEach((element) => {
        if (element.active) {
          _arr.push(element);
        }
      });
      this.industryActivelen = _arr.length;
    },
    // 提交感兴趣的行业
    submit() {
      let _arr = [];
      this.industryList.forEach((element) => {
        if (element.active) {
          _arr.push(element);
        }
      });
      setShowProductDialog(false);
      localStorage.setItem("ProductIndustryCategory", JSON.stringify(_arr));
      this.modelvisible = false;
      this.getRandomOnlineRecommendationList();
    },
    // 取消感兴趣行业
    handleCancel() {
      setShowProductDialog(false);
      this.modelvisible = false;
    },
    Switch_search_nav(index) {
      this.SearchNavIndex = index;
      if (index == 1) {
        document.getElementById("search_nav_bar").style.backgroundImage =
          this.bodyBgImage1;
      }
      if (index == 2) {
        document.getElementById("search_nav_bar").style.backgroundImage =
          this.bodyBgImage2;
      }
      if (index == 3) {
        document.getElementById("search_nav_bar").style.backgroundImage =
          this.bodyBgImage3;
      }
    },
    //增加访问量
    addVisitNum() {
      addVisit();
    },
  },
};
</script>

<style lang="less" scoped>
.page_home {
  width: 100%;

  // 锚点导航
  .Anchor_menu {
    position: fixed;
    width: 65px;
    height: 242px;
    background-color: #ffffff;
    border: solid 1px #188af1;
    left: 166px;
    top: 30%;
    z-index: 9999;
    .menu_list {
      position: relative;
      margin-left: -60px;
      .item_menu {
        font-size: 28px;
        color: #188af1;
        width: 60px;
        height: 60px;
        margin: 0 auto;
        margin-right: 0px;
        text-align: center;
        line-height: 60px;
        cursor: pointer;
        position: relative;
        &:hover {
          position: relative;
          width: 125px !important;
          height: 60px;
          background-color: #188af1;
          text-align: left !important;
          margin-left: 0px !important;
          &:nth-child(1) {
            &::before {
              content: "政策规范" !important;
              position: absolute;
              font-size: 16px;
              right: 14px !important;
              top: 0;
              color: #fff;
            }
          }
          &:nth-child(2) {
            &::before {
              content: "产品供应" !important;
              position: absolute;
              font-size: 16px;
              right: 14px !important;
              top: 0;
              color: #fff;
            }
          }
          &:nth-child(3) {
            &::before {
              content: "产品需求" !important;
              position: absolute;
              font-size: 16px;
              right: 14px !important;
              top: 0;
              color: #fff;
            }
          }
          &:nth-child(4) {
            &::before {
              content: "热门分类" !important;
              position: absolute;
              font-size: 16px;
              right: 14px !important;
              top: 0;
              color: #fff;
            }
          }

          .iconfont {
            color: #fff !important;
            margin-left: 15px;
            font-size: 18px;
          }
        }
        i {
          color: #188af1;
        }
        border-bottom: 1px solid #c0c4cc;
        &:nth-child(4) {
          border-bottom: 0px solid #c0c4cc;
        }
        // &::before {
        //   position: absolute;
        //   width: 53px;
        //   left: 3px;
        //   height: 1px;
        //   top: 0;
        //   content: "";
        //   background-color: #c0c4cc;
        // }
      }
    }
    .active_menu {
      position: relative;
      width: 125px !important;
      height: 60px;
      background-color: #188af1;
      text-align: left !important;
      margin-left: 0px !important;
      &::before {
        position: absolute;
        content: "政策规范" !important;
        font-size: 16px;
        right: 14px !important;
        top: 0;
        color: #fff;
      }

      .iconfont {
        color: #fff !important;
        margin-left: 15px;
        font-size: 18px;
      }
    }
    .active_menu_1 {
      width: 60px !important;
    }

    .active_menu_zhence {
      &::before {
        content: "政策规范" !important;
      }
    }

    .active_menu_chanping {
      &::before {
        content: "产品供应" !important;
      }
    }

    .active_menu_xuqiu {
      &::before {
        content: "产品需求" !important;
      }
    }

    .active_menu_remen {
      &::before {
        content: "热门分类" !important;
      }
    }
  }
  // banner
  .banner_box {
    width: 100%;
    height: 560px;
    background-image: linear-gradient(0deg, #0029cb 0%, #00cbff 100%);
    background-image: url("../assets/images/home/banner.png");
    background-position: center top;
    background-repeat: no-repeat;
    background-size: 100% 100%;
    .serach_box {
      padding-top: 278px;
      .search_containt {
        width: 1020px;
        margin: 0 auto;
        height: 110px;
        .search_nav_bar {
          width: 443px;
          height: 50px;
          margin: 0 auto;
          line-height: 50px;
          background-image: url("../assets/images/home/searchtabbg01.png");
          background-size: 443px 50px;
          background-repeat: no-repeat;
          background-position: center top;
          cursor: pointer;
          .item_search_nav {
            font-size: 18px;
            letter-spacing: 0px;
            color: #e4e7ed;
          }
          .item_search_nav_active {
            color: #2a51bc;
            font-weight: bold;
          }
        }
        .search_input {
          background-color: #ffffff;
          border-radius: 4px 0px 0px 4px;
          .ant-input {
            height: 100%;
            border: 0px;
          }
        }
        .search_btn {
          width: 67px;
          height: 60px;
          background-image: linear-gradient(0deg, #ff9f00 0%, #ee6224 100%);
          text-align: center;
          line-height: 60px;
          border-radius: 0px 4px 4px 0px;

          cursor: pointer;
          i {
            font-size: 26px;
            color: #ffffff;
          }
        }
      }
    }
  }
  // 发布供需

  // 数据预览
  .preview_main {
    background-color: #fff;
    width: 100%;
    height: 350px;
    position: relative;
    .sufix_box {
      width: 1200px;
      background-color: #ffffff;
      box-shadow: 6px 6px 20px 0px rgba(24, 138, 241, 0.16);
      border-radius: 4px;
      margin-top: -80px;
      position: absolute;
      padding: 14px 0;
      top: -60px;
      left: 50%;
      transform: translate(-50%, 60px);
      z-index: 9;
      .item_add_contanint {
        cursor: pointer;
        .add_containt {
          height: 28px;
          line-height: 28px;
          .title {
            font-size: 28px;
            letter-spacing: 0px;
            color: #303133;
          }
          .icon-gengduojiantou {
            color: #909399;
            font-size: 18px;
            vertical-align: top;
          }
        }
        .tips_title {
          font-size: 16px;
          color: #606266;
        }
        img {
          width: 87px;
          height: 92px;
          display: inline-block;
          margin-left: 70px;
        }
        &:hover {
          .add_containt {
            .title {
              color: #188af1;
            }
            .icon-gengduojiantou {
              color: #188af1;
            }
          }
        }
      }
      .boder-r {
        position: relative;
        &::before {
          position: absolute;
          right: 0;
          top: 13px;
          width: 1px;
          height: 66px;
          background-color: #e4e7ed;
          z-index: 1;
          content: "";
        }
      }
    }
    .preview_containt {
      .title {
        font-size: 36px;
        padding-top: 80px;
        color: #333333;
        font-weight: bold;
      }
      .time {
        font-size: 16px;
        line-height: 26px;
        letter-spacing: 0px;
        color: #909399;
      }

      .menu_data {
        margin-top: 44px;
        .item_menu_data {
          width: 20%;
          .radius_icon {
            display: inline-block;
            width: 64px;
            height: 64px;
            border-radius: 100%;
            background-color: #0860b6;
            font-size: 30px;
            line-height: 64px;
            color: #ffffff;
          }
          .bg_gx {
            background-color: #0860b6;
          }
          .bg_cp {
            background-color: #00b7c2;
          }
          .bg_dj {
            background-color: #0860b6;
          }
          .bg_ent {
            background-color: #00b7c2;
          }
          .bg_total {
            background-color: #0860b6;
          }

          .info_title {
            font-size: 16px;
            font-weight: normal;
            font-stretch: normal;
            line-height: 28px;
            letter-spacing: 0px;
            color: #303133;
          }
          .num {
            font-size: 36px;
            font-weight: normal;
            font-stretch: normal;
            line-height: 30px;
            letter-spacing: 0px;
            color: #303133;
          }
        }
      }
    }
  }
  //政策规范
  .news_main {
    background-image: url("../assets/images/home/newsbg.png");
    width: 100%;
    background-size: 100% 100%;
    background-repeat: no-repeat;
    background-position: center top;
    padding: 56px 0;
    .news_containt {
      background-color: #ffffff;
      .l_mian {
        width: 282px;
        height: 282px;
        position: relative;
        padding: 32px 16px 16px 32px;
        background-image: linear-gradient(0deg, #00adff 0%, #2a51bc 100%);
        .title {
          font-size: 36px;
          line-height: 28px;
          letter-spacing: 0px;
          color: #ffffff;
        }
        .tips_title {
          font-size: 16px;
          line-height: 28px;
          letter-spacing: 0px;
          color: #ffffff;
          margin-top: 22px;
        }
        .chua {
          position: absolute;
          z-index: 6;
          width: 120px;
          height: 120px;
          bottom: 16px;
          right: 16px;
        }
      }

      .r_main {
        padding: 23px;
        .ent_title {
          font-size: 22px;
          letter-spacing: 0px;
          color: #333333;
          font-weight: bold;
          width: 868px;
          cursor: pointer;
          &:hover {
            color: #188af1;
          }
        }
        .ent_details {
          font-family: Microsoft YaHei;
          font-size: 14px;
          font-weight: normal;
          font-stretch: normal;
          line-height: 24px;
          letter-spacing: 0px;
          color: #909399;
          border-bottom: 1px solid #ddd;
          -webkit-line-clamp: 2; // 用来限制在一个块元素显示的文本的行数
          display: -webkit-box; // 将对象作为弹性伸缩盒模型显示
          -webkit-box-orient: vertical; //设置或检查伸缩盒对象的子元素的排列方式
          text-overflow: ellipsis; // 在多行文本的情况下，用...隐藏超出范围的文本
          word-break: break-all;
          overflow: hidden;
        }
        .news_list {
          margin-top: 18px;
          .item_news_list {
            width: 50%;
            float: left;
            font-size: 16px;
            line-height: 36px;
            letter-spacing: 0px;
            color: #606266;
            cursor: pointer;
            p {
              padding-left: 16px;
              position: relative;
              width: 430px;
              &:hover {
                color: #188af1;
              }
              &::before {
                content: "";
                width: 8px;
                height: 8px;
                background-color: #188af1;
                position: absolute;
                z-index: 1;
                left: 0;
                top: 13px;
              }
            }
          }
        }
      }
    }
  }
  // 产品供应
  .product_supply {
    background-color: #ffffff;
    width: 100%;

    .product_supply_main {
      padding-top: 20px;
      padding-bottom: 32px;
      .exchange {
        .huan-cls {
          display: inline;
          color: #909399;
          font-size: 16px;
          cursor: pointer;
        }
        .iconfont {
          color: #909399;
          font-size: 16px;
          cursor: pointer;
        }
      }
      .product_nav {
        float: left;
        width: 282px;
        height: 764px;
        background-image: linear-gradient(358deg, #9ff0dd 0%, #05bccb 100%);
        position: relative;
        .product_containt {
          padding: 0 32px;
          .title {
            font-family: Microsoft YaHei;
            font-size: @font36;
            font-weight: normal;
            line-height: 28px;
            letter-spacing: 0px;
            color: #ffffff;
            margin-top: 40px;
          }

          .tags_title {
            font-size: 16px;
            line-height: 28px;
            letter-spacing: 0px;
            color: #ffffff;
            margin-top: 16px;
          }
          .nav_btn_containt {
            margin-top: 48px;

            .item_nav_btn {
              float: left;
              width: 100px;
              height: 32px;
              border-radius: 4px;
              color: #fff;
              text-align: center;
              line-height: 32px;
              border: solid 1px #ffffff;
              cursor: pointer;
              p {
                padding: 0 6px;
                color: #fff;
              }
              &:nth-child(odd) {
                margin-right: 16px;
                margin-bottom: 16px;
              }
              &:hover {
                background: #fff;

                p {
                  color: #00b7c2;
                }
              }
            }
          }
          .more_btn {
            width: 100px;
            font-size: 14px;
            letter-spacing: 0px;
            color: #909399;
          }
          .chua {
            width: 156px;
            height: 148px;
            position: absolute;
            bottom: 14px;
            right: 14px;
          }
        }
      }
      .demand_list {
        float: left;
        width: 918px;
        background: #ffffff;
        box-sizing: border-box;
        .item_demand_list {
          width: 33.33%;
          float: left;
          padding: 21.6px 24px;
          border-right: 1px solid #ddd;
          border-bottom: 1px solid #ddd;
          position: relative;
          box-sizing: border-box;
          height: 382px;
          cursor: pointer;
          &:nth-child(1) {
            border-top: 1px solid #ddd;
          }
          &:nth-child(2) {
            border-top: 1px solid #ddd;
          }
          &:nth-child(3) {
            border-top: 1px solid #ddd;
          }
          .price {
            font-size: 18px;
            letter-spacing: 0px;
            color: #ee6224;
            margin-top: 5px;
          }
          .category {
            font-size: 14px;
            letter-spacing: 0px;
            color: #909399;
          }
          .category_tags_box {
            margin: 5px 0;
            height: 24px;
            .category_tags {
              display: inline-block;
              height: 24px;
              line-height: 24px;
              padding: 0 12px;
              border-radius: 10px;
              font-size: 14px;
              margin-right: 10px;
              &:nth-child(1) {
                background-color: #ffffff;
                color: #0da9b0;
                border: solid 1px #0da9b0;
              }
              &:nth-child(2) {
                background-color: #ffffff;
                color: #188af1;
                border: solid 1px #188af1;
              }
            }
          }
          .tags {
            position: absolute;
            width: 77px;
            height: 35px;
            line-height: 35px;
            background-color: #ff4e00;
            border-radius: 0px 0px 0px 38px;
            right: 22px;
            top: 22px;
            text-align: right;
            font-size: 16px;
            padding: 0px 10px 0 0;
            color: #ffffff;
            z-index: 6;
          }
          .product_img_box {
            width: 258px;
            height: 180px;
            background-image: linear-gradient(90deg);
            border-radius: 4px;
            display: flex;
            justify-content: center;
            align-items: center;
            overflow: hidden;

            img {
              width: auto;
              max-height: 180px;
              transition: all 0.8s;
              -ms-transition: all 0.8s;
            }
          }
          &:hover {
            .title {
              color: #188af1;
            }

            .product_img_box {
              .product_img {
                transform: scale(1.2);
                -ms-transform: scale(1.2);
              }
            }
            .company {
              .icon-gengduojiantou {
                color: #188af1;
                font-size: 18px;
              }
            }
          }
          .item_details {
            p {
              position: relative;
              padding-left: 14px;
              color: #909399;
              font-size: 14px;
              &::before {
                position: absolute;
                content: "";
                width: 7px;
                height: 7px;
                background-color: #188af1;
                border-radius: 100%;
                top: 8px;
                left: 0;
              }
            }
          }
          .title {
            font-size: 18px;
            letter-spacing: 0px;
            color: #303133;
            position: relative;
            width: 100%;
          }

          .company {
            .company_name {
              font-size: 14px;
              line-height: 30px;
              letter-spacing: 0px;
              color: #606266;
              padding-left: 14px;
              position: relative;
              &::before {
                position: absolute;
                content: "";
                width: 6px;
                height: 18px;
                background-color: #ee6224;
                border-radius: 2px;
                top: 5px;
                left: 0;
              }
            }
            .icon-gengduojiantou {
              margin-top: 6px;
              color: #909399;
              font-size: 18px;
            }
          }
        }
      }
    }
    .product_banner {
      img {
        width: 1200px;
        height: 120px;
      }
    }
  }
  // 产品需求
  .material_demand {
    background-color: rgba(192, 196, 204, 0.12);
    width: 100%;
    .material_demand_main {
      padding-top: 20px;
      padding-bottom: 56px;
      .exchange {
        .iconfont {
          color: #909399;
          font-size: 16px;
          cursor: pointer;
        }
      }
      .material_nav {
        float: left;
        width: 282px;
        height: 537px;
        text-align: left;
        background-image: linear-gradient(0deg, #33a1fd 0%, #0860b6 100%);
        position: relative;
        .material_containt {
          padding: 0 32px;
          .title {
            font-family: Microsoft YaHei;
            font-size: @font36;
            font-weight: normal;
            line-height: 28px;
            letter-spacing: 0px;
            color: #ffffff;
            margin-top: 40px;
          }
          .tags_title {
            font-size: 16px;
            line-height: 28px;
            letter-spacing: 0px;
            color: #ffffff;
            margin-top: 16px;
          }
          .nav_btn_containt {
            margin-top: 32px;

            .item_nav_btn {
              float: left;
              width: 100px;
              height: 32px;
              border-radius: 4px;
              color: #fff;
              text-align: center;
              line-height: 32px;
              border: solid 1px #ffffff;
              cursor: pointer;
              p {
                padding: 0 6px;
                color: #fff;
              }
              &:nth-child(odd) {
                margin-right: 16px;
                margin-bottom: 16px;
              }
              &:hover {
                background: #fff;

                p {
                  color: #188af1;
                }
              }
            }
          }
          .more_btn {
            width: 100px;
            font-size: 14px;
            letter-spacing: 0px;
            color: #909399;
          }
          .chua {
            width: 156px;
            height: 148px;
            position: absolute;
            bottom: 14px;
            right: 14px;
          }
        }
      }
      .demand_list {
        float: left;
        width: 918px;
        background: #ffffff;
        box-sizing: border-box;
        .item_demand_list {
          width: 33.33%;
          float: left;
          // height: 253px;
          padding: 10px 22px 22px 22px;
          border-right: 1px solid #ddd;
          border-bottom: 1px solid #ddd;
          position: relative;
          cursor: pointer;
          &:nth-child(1) {
            border-top: 1px solid #ddd;
          }
          &:nth-child(2) {
            border-top: 1px solid #ddd;
          }
          &:nth-child(3) {
            border-top: 1px solid #ddd;
          }
          .tags {
            position: absolute;
            width: 111px;
            height: 35px;
            line-height: 35px;
            background-color: #e9284f;
            border-radius: 0px 0px 0px 38px;
            right: 0;
            top: 0;
            text-align: center;
            font-size: 16px;
            color: #ffffff;
          }
          .icon-gengduojiantou {
            color: #909399;
            font-size: 18px;
          }
          &:hover {
            .title {
              color: #188af1;
              // font-weight: bold;
            }
            .company {
              .icon-gengduojiantou {
                color: #188af1;
                font-size: 18px;
              }
            }
          }
          .item_details {
            p {
              position: relative;
              padding-left: 14px;
              color: #909399;
              font-size: 14px;
              &::before {
                position: absolute;
                content: "";
                width: 7px;
                height: 7px;
                background-color: #188af1;
                border-radius: 100%;
                top: 8px;
                left: 0;
              }
            }
          }
          .title {
            font-size: 18px;
            letter-spacing: 0px;
            color: #303133;
            position: relative;
            padding-left: 14px;
            width: 100%;

            &::before {
              position: absolute;
              content: "";
              width: 6px;
              height: 16px;
              background-color: #188af1;
              border-radius: 2px;
              top: 5px;
              left: 0;
            }
          }

          .line {
            width: 248px;
            height: 2px;
            margin-left: 14px;
            background-image: linear-gradient(
              to right,
              #ebeef5 0%,
              #ebeef5 50%,
              transparent 50%
            );
            background-size: 8px 2px;
            background-repeat: repeat-x;
            margin-top: 15px;
            margin-bottom: 15px;
          }

          .company {
            .company_name {
              font-size: 14px;
              line-height: 30px;
              letter-spacing: 0px;
              color: #606266;
            }
            .gengduojiantou {
              margin-top: 6px;
              color: #909399;
              font-size: 18px;
            }
          }
        }
        .item_demand_list_tags {
          padding-top: 40px;
        }
      }
    }
  }
  // 热门分类
  .hot_sort {
    width: 100%;
    padding-bottom: 60px;
    // background-color: rgba(192, 196, 204, 0.12);
    background-color: #fff;
    .hot_title {
      font-size: @font36;
      color: @text-color-606;
      padding-top: 56px;
      margin-bottom: 32px;
    }
    .sort_list {
      .item_sort_list {
        height: 157px;
        width: 389px;
        float: left;
        background-image: url("../assets/images/home/hotbg1.png");
        background-repeat: no-repeat;
        background-size: 100% 100%;
        background-position: center top;
        margin-left: 16px;
        margin-bottom: 30px;
        color: #ffffff;
        text-align: left;
        &:nth-child(1) {
          background-image: url("../assets/images/home/hotbg1.png");
        }
        &:nth-child(2) {
          background-image: url("../assets/images/home/hotbg02.png");
        }
        &:nth-child(3) {
          background-image: url("../assets/images/home/hotbg03.png");
        }
        &:nth-child(4) {
          background-image: url("../assets/images/home/hotbg1.png");
        }
        &:nth-child(5) {
          background-image: url("../assets/images/home/hotbg02.png");
        }
        &:nth-child(6) {
          background-image: url("../assets/images/home/hotbg03.png");
        }
        &:hover {
          // .icon-gengduojiantou {
          //   color: #188af1;
          // }
        }
        .icon-gengduojiantou {
          color: #dadada;
          font-size: 18px;
          cursor: pointer;
        }
        .top_box {
          padding-left: 38px;
          padding-top: 26px;
          padding-bottom: 18px;
          padding-right: 18px;
          font-size: 18px;
          .tag_title {
            font-size: 18px;
          }
        }

        .child_box {
          padding-left: 38px;
          padding-right: 18px;
          .child_title {
            width: 50%;
            float: left;
            cursor: pointer;
            margin-bottom: 3px;
          }
          .child_line_title {
            width: 100%;
          }
        }
        &:nth-child(1) {
          margin-left: 0;
        }
        &:nth-child(4) {
          margin-left: 0;
        }
      }
    }
  }
  // 立即入驻
  .settlement {
    height: 300px;
    width: 100%;
    background-image: url("../assets/images/home/_bottom_bg.png");
    background-size: 100% 300px;
    background-position: center top;
    background-repeat: no-repeat;
    .tips_title {
      padding-top: 80px;
      color: #ffffff;
      font-size: 28px;
      em {
        font-size: 46px;
      }
    }
    .setment_btn {
      width: 160px;
      height: 48px;
      border-radius: 4px;
      border: solid 1px #ffffff;
      display: inline-block;
      line-height: 48px;
      font-size: 16px;
      letter-spacing: 0px;
      color: #ffffff;
      margin-top: 42px;
    }
  }
}

::v-deep .ant-modal {
  // position: fixed;
  // top: 30%;
  // left: 50%;
  // transform: translate(-50%,-50%);
}
::v-deep .ant-modal-content {
  border-radius: 32px;
  border: solid 6px #188af1;
}
::v-deep .ant-modal-header {
  height: 60px;
  background-color: #2a51bc;
  border-radius: 24px 24px 0px 0px;
  text-align: center;
  display: none;
}
::v-deep .ant-modal-title {
  color: #fff;
  font-size: @font26;
}
::v-deep .ant-modal-footer {
  margin: 0 24px;
  border-top: 0px solid #e8e8e8;
}

// 弹窗
.industrymode {
  .model_containt {
    padding: 30px 60px;
    font-size: 18px;
    letter-spacing: 0px;
    color: #909399;
    position: relative;
  }
  .person {
    background-image: url("../assets/images/home/person.png");
    width: 220px;
    height: 464px;
    background-size: 220px 464px;
    background-repeat: no-repeat;
    position: absolute;
    right: -140px;
    top: -35px;
  }
  .more {
    height: 59px;
    line-height: 59px;
    padding-left: 60px;
    background-color: #f3f6fe;
    .num {
      color: #188af1;
    }
  }
  .top_title {
    font-size: 36px;
    color: #303133;
  }

  .tips_title {
    font-size: 22px;
    line-height: 22px;
    letter-spacing: 0px;
    color: #c0c4cc;
    margin-top: 20px;
  }

  .industrymode_list {
    margin-top: 30px;
    span {
      width: 150px;
      height: 48px;
      padding: 0 15px;
      background-color: #ffffff;
      border-radius: 24px;
      display: inline-block;
      text-align: center;
      line-height: 48px;
      font-size: 16px;
      color: #909399;
      margin-right: 30px;
      &:nth-child(4n) {
        margin-right: 0;
      }
    }
    .item_industrymode {
      width: 150px;
      height: 48px;
      padding: 0 15px;
      background-color: #ffffff;
      border-radius: 24px;
      border: solid 1px #dcdfe6;
      display: inline-block;
      text-align: center;
      line-height: 48px;
      font-size: 16px;
      color: #909399;
      margin-top: 32px;
      margin-right: 30px;
      cursor: pointer;
      &:nth-child(4n) {
        margin-right: 0;
      }
    }

    .item_industrymode_active {
      width: 150px;
      height: 48px;
      background-color: #2a51bc;
      border-radius: 24px;
      display: inline-block;
      text-align: center;
      line-height: 48px;
      font-size: 16px;
      color: #ffffff;
      margin-top: 32px;
      margin-right: 30px;
      &:nth-child(4n) {
        margin-right: 0;
      }
    }
  }
}
</style>
